<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img.radius {
            border-radius: 8px;
        }

        img.radius02 {
            border-radius: 50%;
        }

        .thumb {
            width: 100px;
            height: 150px;
        }

        .thumb2 {
            object-fit: contain;
        }

        .thumb3 {
            object-fit: cover;
        }

        .responsive {
            max-width: 100%;
            height: auto;
        }

        .responsive2 {
            width: 100%;
            height: auto;
        }
        #img {
            height: 200px;
            border: 1px solid red;
        }
        #img img {
            max-height: 100%;
        }
        div.bg-green {
            background: #008000;
            padding: 15px;
        }

        div.op1 {
            opacity: 0.1;
        }

        div.op2 {
            opacity: 0.5;
        }

        div.op3 {
            opacity: 0.8;
        }

        div.op4 {
            opacity: 1.0;
        }

        div.bg-op1 {
            /* 背景颜色及透明度 */
            background: rgba(0, 255, 0, 0.1);
        }

    </style>
</head>
<body>
<p>图片尺寸400*300</p>
<img src="../resources/images/paris.jpg"><br>
<hr>
<p>加圆角8px</p>
<img src="../resources/images/paris.jpg" class="radius"> <br>
<p>加圆角50%</p>
<img src="../resources/images/paris.jpg" class="radius02"> <br>
<hr>
<p>图片实际尺寸与给定容器尺寸不同时，默认为自动缩放。容器为100*150</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb"> <br>
<p>object-fit: contain，保持原图片高宽比缩放，填充容器</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb thumb2"> <br>
<p>object-fit: cover，保持原图片高宽比缩放，直到高或宽任一边完全相等，居中，两端裁剪</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb thumb3"> <br>
<hr>
<p>以下图片为网络图片，需联网。实际尺寸: 1000*350。<br>
    默认样式
</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="此为网络图片">
<p>声明最大宽度100%，高度自动。自动随浏览器窗口尺寸缩小</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" class="responsive" alt="此为网络图片">
<br>
<p>声明宽度100%，高度自动。自动随窗口缩小及放大</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" class="responsive2" alt="此为网络图片">
<br>
<p>
    当子元素尺寸大于父元素，元素会溢出。可通过max-height/max-width限制子元素最大尺寸
</p>
<div id="img">
    <img src="../resources/images/paris.jpg" alt="">
</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam, cum dicta error natus rem tempore ut
        voluptates! Ab assumenda cumque deleniti ea exercitationem expedita labore, laboriosam, nostrum possimus quia,
        totam ullam.</p>
</div>
<div>
    <h4>loading</h4>
    <p>
        loading="lazy"属性支持延迟加载图片。在浏览器真正需要渲染显式图片时(具体由各浏览器决定，一般为滚动到需要展示图片时)加载图片，而非打开页面即加载。
        当页面中图片过多时，浏览器仅需先加载首屏展示图片，可避免占用网络资源提高页面渲染效率。可结合JS实现占位。
        <br>
        <img src="https://picsum.photos/200/200/?random=1" alt="random" loading="lazy">
    </p>
</div>
<hr>
<h1>CSS Opacity</h1>
<div class="bg-green op1">opacity 0.1</div>
<div class="bg-green op2">opacity 0.5</div>
<div class="bg-green op3">opacity 0.8</div>
<div class="bg-green op4">opacity 1.0</div>
<br><br>
<hr>
<h1>CSS Opacity Background</h1>
<div class="bg-op1">
    <p>仅背景透明，文本显式正常</p>
</div>
<br><br>
</body>
</html>